<template>
    <div>
     <el-table
      :data="props.row.materials"
      stripe
      :headerCellStyle="{'textAlign':'center'}"
      :cellStyle="{'textAlign':'center','fontSize': '12px'}"
      empty-text="当前分类下，暂无材料"
      style="width: 100%">
      <el-table-column
        prop="materialId"
        label="材料编码"
        min-width="100">
      </el-table-column>
      <el-table-column
        prop="materialName"
        label="材料名称"
        min-width="100">
      </el-table-column>
      <el-table-column
        prop="totalCount"
        label="库存"
        min-width="50">
      </el-table-column>
      <el-table-column
        prop="color"
        label="颜色"
        min-width="100">
      </el-table-column>
      <el-table-column
        prop="norm"
        label="规格"
        min-width="100">
      </el-table-column>
      <el-table-column
        prop="storeAverageUseCount"
        label="平均使用数量"
        min-width="100">
      </el-table-column>
      <el-table-column
       
        label="店铺预警数量"
        min-width="100">
     <template slot-scope="scope">
        {{scope.row.storeInventoryCount}}
     </template>
      </el-table-column>
      <el-table-column label="库存状态">
        <template slot-scope="scope">
         <el-tag text="正常" type="success" v-if="scope.row.totalCount / scope.row.storeAverageUseCount > scope.row.storeInventoryCount">库存正常</el-tag>
         <el-tag v-else type="danger">库存告急</el-tag>
      </template>
      </el-table-column>
      <el-table-column
        prop="price"
        label="成本价"
        min-width="100">
      </el-table-column>
      <el-table-column
        prop="salePrice"
        label="销售价"
        min-width="100">
      </el-table-column>
      <el-table-column label="操作" fixed="right">
        <template slot-scope="scope">
         <el-button  size="mini" @click="editBtn(scope.row)">编辑</el-button>
      </template>
      </el-table-column>
    </el-table>
    </div>
    
</template>
<script>
 export default{
    name:"MateriaDetaile",
    props:{
        props:{
            type:Object,
            default:()=>({})
        }
    },
    watch:{
        props:{
            handler(newVal,oldVal){
                if(newVal && oldVal!=newVal){
                  this.props = newVal;
                }
            },
            deep:true,
            immediate:true
        }
    },
    mounted(){
        this.props.row.materials.forEach(el=>{
           el.edit = false;
        })
    },
    data(){
        return{

        }
    },
    methods:{
        editBtn(v){
            // this.showDialog(opts,v);
        }
    }
 }
</script>
<style>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>